<template>
  <!-- 车况档案 -->
  <view class="car-maintenance">
    <view class="list-wrapper">
      <view class="tab"></view>
      <view class="tab-empty" v-show="isFixedTop"></view>
      <view :class="[(isFixedTop) ? 'fixedTop' : '']">
        <view class="tab-wrapper">
          <view class="tab-list" :class="{'ml': currents >= 2}" v-if="showTab" id="box">
            <u-tabsone name="name" :list="carnameList" :is-scroll="true" bar-width="60" bar-height="6" :current="currents"
              @change="changeTab" active-color="#333" inactive-color="#666" font-size="28" height="80rpx"
              :active-item-style="tabActiveStyle" :bar-style="barActiveStyle"></u-tabsone>
          </view>
          <view class="btn-more">
            <u-icon name="grid-fill" color="#333" size="32" @click="showClassify = !showClassify"></u-icon>
            <view class="tab-mask" v-if="showClassify" @touchmove.stop.prevent>
              <view class="mask"></view>
              <view class="content">
                <view class="title"><text>全部概况</text></view>
                <view class="list flex flex-jc-sb">
                  <view class="item" v-for="(item, index) in carnameList" :key="index" @click="carClick(item,index)">
                    <i-icon :icon="item.icon" type="single" size="50rpx" color="#5F5F5F"></i-icon>
                    <text class="textnamw mt-10">{{ item | filterName }}</text>
                    <text class="text" v-if="!item.status">正常</text>
                    <text class="textred" v-else>异常</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-gap height="10" bg-color="#F6F6F6"></u-gap>
      <view class="1234" v-for="(item,index) in carnameList" :key="index">
        <view class="listbox" :id="'progrn'+index">
          <view class="flex flex-jc-sb flex-ai-c mb_20">
            <view class="ltname font-36 color-333 font-bold">
              {{item.name}}
            </view>
            <view class="flex font-26 color-666" v-if="item.name === '外观'">
              <view class="mr-20">
                <i-icon icon="icongouSolid" cl color="#70CD58" class="mr-10"></i-icon>
                正常
              </view>
              <view class="mr-20">
                <i-icon icon="iconexport" color="#999999" class="mr-10"></i-icon>
                未检测
              </view>
              <view class="1234">
                <i-icon icon="icongantanhao" color="#FF4B44" class="mr-10"></i-icon>
                异常
              </view>
            </view>
          </view>
          <view>
            <view class="content flex flex-jc-sb mb_15" v-for="(item1,index1) in item.carwg " :key="index1">
              <view class="font-28 color-333">
                {{item1.name}}
              </view>
              <view class="1234">
                <view v-if="item1.type===0">
                  <i-icon icon="iconexport" color="#999999"></i-icon>
                </view>
                <view v-if="item1.type===1">
                  <i-icon icon="icongouSolid" color="#70CD58"></i-icon>
                </view>
                <view v-if="item1.type===2">
                  <i-icon icon="icongantanhao" color="#FF4B44"></i-icon>
                </view>
              </view>
            </view>
          </view>
        </view>
        <u-gap height="10" bg-color="#F6F6F6"></u-gap>
      </view>
    </view>
  </view>
</template>

<script>
  import defaultImg from '@/components/defaultImg/defaultImg.vue' //默认图片组件
  export default {
    components: {
      defaultImg
    },
    props: {
      tabIndex: {
        type: [Number, String],
        default: 0
      },
      carid: {
        type: String,
        default: ''
      },
      isFixedTop: {
        type: Boolean,
        default: false
      }
    },

    filters: {
      filterName(data) {
        return data.name + data.count + '项'
      }
    },

    watch: {
      tabIndex(newVal, oldVal) {
        if (newVal === 2 && !this.showTab) {
          this.showTab = true
        }
        if (newVal === 2) {
          this.cuttnum = newVal
          if (this.caridone) {
            this.GetCondition(this.caridone)
          }
        }
      },
      carid(e) {
        if (this.cuttnum === 2 && !this.showTab) {
          this.showTab = true
        }
        // 车子id不为空
        this.caridone = e
        if (this.cuttnum === 2) {
          if (e) {
            this.GetCondition(e)
          }
        }
      }
    },
    data() {
      return {
        tabActiveStyle: {
          'font-weight': 'bold',
          'font-size': '32rpx'
        },
        barActiveStyle: {
          'background': 'linear-gradient(0deg, #FBB000, #FFE23E)'
        },
        currents: 0,
        showClassify: false,
        showTab: false,
        screeningCriteria: [],
        carnameList: [],
        caridone: '', //车id,
        cuttnum: 0,
        carList: [],
        overview: [{
          number: '车身外观22项',
          icon: 'iconqiche1',
          typeid: 1
        }, {
          number: '底盘7项',
          icon: 'icondipandiannaokongzhixitong',
          typeid: 0
        }, {
          number: '悬挂系统4项',
          icon: 'iconitem-tyre',
          typeid: 0
        }, {
          number: '制动系统6项',
          icon: 'iconzhidong',
          typeid: 0
        }, {
          number: '发动机总成7项',
          icon: 'iconchilun',
          typeid: 0
        }, {
          number: '冷却系统1项',
          icon: 'iconjiangwen',
          typeid: 0
        }, {
          number: '空调系统6项',
          icon: 'iconzhichilengreshui',
          typeid: 0
        }, {
          number: '转向系统2项',
          icon: 'iconzhuanxiangxitong',
          typeid: 0
        }, {
          number: '燃油系统2项',
          icon: 'iconranyouliang',
          typeid: 0
        }, {
          number: '进气系统1项',
          icon: 'icontetejieqimenqingxi',
          typeid: 0
        }, {
          number: '照明系统4项',
          icon: 'iconchedeng',
          typeid: 1
        }, {
          number: '电器系统6项',
          icon: 'iconwudaocheleida',
          typeid: 0
        }, {
          number: '变速箱总成1项',
          icon: 'iconyinqingguanli',
          typeid: 0
        }, ]
      }
    },
    created() {
      this.cuttnum = this.tabIndex
    },
    methods: {
      async GetCondition() {
        try {
          let data = {
            carId: this.caridone
          }
          const res = await this.$api.commodity.GetCondition(data)
          this.carList = res.data
          this.carList.forEach((car, index) => {
            car.status = false //是否异常
            car.icon = this.overview[index].icon //添加icon
            car.count = car.carwg.length //获取子集长度
            car.carwg.forEach(item => {
              if (item.type === 2) {
                car.status = true
              }
            })
          })
          this.carnameList = this.carList
        } catch (e) {
          console.log(e)
        }
      },
      changeTab(index) {
        this.currents = index
        this.backthetop(index)
      },
      //全部概况选择
      carClick(datas, index) {
        this.currents = index
        this.showClassify = false
        this.backthetop(index)
      },
      // 从评论区域回到顶部
      backthetop(index) {
        uni.createSelectorQuery().select('#progrn' + index).boundingClientRect(data => { //目标位置的节点：类或者id
          uni.createSelectorQuery().select('.list-wrapper').boundingClientRect(res => { //最外层盒子的节点：类或者id
            var number = data.top - res.top - -257
            console.log(number)
            uni.pageScrollTo({
              duration: 200, //过渡时间
              scrollTop: number, //到达距离顶部的top值
            })
          }).exec()
        }).exec()
      },
    }
  }
</script>

<style lang="scss" scoped>
  .fixedTop {
    position: fixed;
    top: 150rpx;
    /* #ifdef H5 */
    top: 235rpx;
    /* #endif */
    left: 0;
    right: 0;
    z-index: 9999;
    background: #FFFFFF;
  }
  .tab-wrapper {
    width: 750rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
    position: relative;

    .tab-list {
      flex: 1;
      overflow: hidden;
    }

    .ml {
      margin-left: 24rpx;
    }

    .btn-more {
      height: 50rpx;
      display: flex;
      align-items: center;
      border-left: 2rpx solid #DBDBDB;
      padding: 0 24rpx;
    }
  }

  .tab-empty {
    height: 80rpx;
  }

  .tab-mask {
    position: absolute;
    top: 80rpx;
    left: 0;
    height: 100vh;
    width: 750rpx;
    z-index: 99;

    .mask {
      background-color: rgba(0, 0, 0, 0.3);
      width: 100%;
      height: 100%;
    }

    .content {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      background-color: #fff;

      .title {
        height: 86rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
        border-bottom: 2rpx solid #eee;
      }

      .list {
        display: flex;
        flex-wrap: wrap;
        padding: 0rpx 32rpx 60rpx 32rpx;

        .item {
          width: 160rpx;
          height: 170rpx;
          background: #FFFFFF;
          box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
          border-radius: 10rpx;
          margin-top: 33rpx;
          padding: 30rpx 0rpx 20rpx 0rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .icon {
            width: 54rpx;
            height: 54rpx;
          }

          .text {
            font-size: 28rpx;
            color: #333;
          }

          .textred {
            font-size: 28rpx;
            color: #FE4B44;
          }

          .textnamw {
            font-size: 20rpx;
            color: #999999;
          }
        }
      }
    }
  }

  .listbox {
    padding: 30rpx 34rpx 10rpx 34rpx;
  }
</style>
